﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/Mastert.cshtml";
}
<style>
    .control-group
    {
        float: left;
        margin-bottom: 10px;
        width: 49%;
    }
    
    .control-group90
    {
        float: left;
        margin-bottom: 10px;
        width: 98%;
    }
    .stdform label
    {
        float: left;
        padding: 5px 15px 0 20px;
        text-align: left;
        width: auto;
    }
    .label
    {
        font-size: 11px;
        font-weight: normal;
        padding: 3px 5px;
        float: none;
    }
    .stdform span.field, .stdform div.field
    {
        display: block;
        margin-left: 110px;
        position: relative;
    }
    input[type="text"], input[type="password"]
    {
        border: 1px solid #AAAAAA;
        padding: 3px;
        width: 100%;
    }
    
    .stdform .formwrapper
    {
        display: block;
        line-height: 25px;
        margin-left: 120px;
        padding-top: 5px;
    }
 @*   .stepContainer
    {
        height: auto !important;
    }*@
    textarea
{
   resize: none;
    margin-top:5px;
}
    .btn-danger
    {
    padding: 0 2px;
    margin-left :5px;
    margin-top :5px;
    margin-bottom:5px;
    }
    .label-bold{
        font-weight: bold; 
    }
</style>
<script src="/js/jquery.tmpl.min.js" type="text/javascript"></script>
<script src="/js/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="/js/jquery.fileupload.js" type="text/javascript"></script>
<script src="/js/jquery.fileupload-ui.js" type="text/javascript"></script>
<script src="/js/jquery.uniform.min.js" type="text/javascript"></script>
<script src="/js/jquery.smartWizard.min.js" type="text/javascript"></script>
<div class="widgetcontent">
    <!-- START OF DEFAULT WIZARD -->
    <form class="stdform" method="post" action="wizards.html">
    <div id="wizard" class="wizard">
        <br />
        <ul class="hormenu">
            <li><a href="#wiz1step1"><span class="h2">Step 1</span> <span class="label">ข้อมูลผู้สมัครและเรื่องที่เสนอ</span>        </a></li>
            <li><a href="#wiz1step2"><span class="h2">Step 2</span> <span class="label">รายละเอียดการปรับปรุง</span> </a></li>
            <li><a href="#wiz1step3"><span class="h2">Step 3</span> <span class="label">แนวความคิด</span> </a></li>
        </ul>
        <div id="wiz1step1" class="formwiz">
            <h4 class="widgettitle">
                Step 1: ข้อมูลผู้สมัครและเรื่องที่เสนอ</h4>
            <div class="control-group ">
                <label class="label-bold">
                    ชื่อผู้เสนอ</label>
                <span class="field">
                    <input type="text" name="firstname" id="firstname" class="input-xxlarge" /></span>
            </div>
            <div class="control-group ">
                <label class="label-bold">
                    เลขประจำตัว</label>
                <span class="field">
                    <input type="text" name="firstname" id="firstname" class="input-xxlarge" /></span>
            </div>
            <div class="control-group ">
                <label class="label-bold">
                    แผนก/ส่วน:</label>
                <span class="field">
                    <input type="text" name="firstname" id="firstname" class="input-xxlarge" /></span>
            </div>
            <div class="control-group ">
                <label class="label-bold">
                    วันที่:</label>
                <span class="field">
                    <input type="text" name="firstname" id="firstname" class="input-xxlarge" /></span>
            </div>
            <div class="control-group90 ">
                <label class="label-bold">
                    เรื่องที่เสนอ:</label>
                <span class="field">
                    <input type="text" name="lastname" id="lastname" class="input-xxlarge" /></span>
            </div>
        </div>
        <!--#wiz1step1-->
        <div id="wiz1step2" class="formwiz">
            <h4 class="widgettitle">
                Step 2: รายละเอียดการปรับปรุง</h4>
            <div class="control-group ">
                <div class="formwrapper">
                    <h3> ปรับปรุงเครื่องจักร :</h3> </div>
                <span class="formwrapper">
                    <input type="checkbox" name="check2" />
                    Unchecked Checkbox<br />
                    <input type="checkbox" name="check2" checked="checked" />
                    Checked Checkbox
                    <br />
                    <input type="checkbox" name="check2" disabled="disabled" />
                    Disabled Checkbox
                    <br />
                    <input type="checkbox" name="check2" disabled="disabled" checked="checked" />
                    Disabled Checked Checkbox </span>
            </div>
            <div class="control-group ">
                <div class="formwrapper">
                    <h3> ปรับปรุงสินค้า :</h3></div>
                <span class="formwrapper">
                    <input type="checkbox" name="check2" />
                    Unchecked Checkbox<br />
                    <input type="checkbox" name="check2" checked="checked" />
                    Checked Checkbox
                    <br />
                    <input type="checkbox" name="check2" disabled="disabled" />
                    Disabled Checkbox
                    <br />
                    <input type="checkbox" name="check2" disabled="disabled" checked="checked" />
                    Disabled Checked Checkbox </span>
            </div>
            <div class="control-group ">
                <div class="formwrapper label-bold">
                    รูปก่อนการแก้ไข :</div>
                <div class="formwrapper">
                 
                        <li>image1 <a class="btn btn-danger iconfa-remove" ></a></li>
                        <li>image2 <a class="btn btn-danger iconfa-remove" ></a></li>
                        <li>image3 <a class="btn btn-danger iconfa-remove" ></a></li>
                    
                </div>
            </div>
            <div class="control-group ">
                <div class="formwrapper label-bold">
                    รูปหลังการแก้ไข :</div>
                <div class="formwrapper">
                    
                        <li>image1 <a class="iconfa-remove" ></a></li>
                        <li>image2 </li>
                        <li>image3 </li>
                    
                </div>
            </div>
        </div>
        <!--#wiz1step2-->
        <div id="wiz1step3" class="formwiz">
            <h4 class="widgettitle">
                Step 3: แนวความคิด</h4>
            <div class="par terms" style="padding: 0 20px;">
                <p>
                    <label class="label-bold">
                        ที่มาของเรื่อง/ปัญหา :</label>
                    <span class="field" style="margin-left: 160px">
                        <textarea class="span6" name="location" rows="4" cols="80" style="width: 100%; height: 120px;"></textarea>
                    </span>
                </p>
                <p>
                    <label class="label-bold">
                        แนวคิด/วิธีการปรับปรุง :</label>
                    <span class="field" style="margin-left: 160px">
                        <textarea class="span6" name="location" rows="4" cols="80" style="width: 100%; height: 120px;"></textarea>
                    </span>
                </p>
                <p>
                    <label class="label-bold">
                        สรุปผลที่ได้รับ :<br /> (ลำดับเป็นหัวข้อ) </label>
                    <span class="field" style="margin-left: 160px">
                        <textarea class="span6" name="location" rows="4" cols="80" style="width: 100%; height: 120px;"></textarea>
                    </span>
                </p>
            </div>
        </div>
        <!--#wiz1step3-->
    </div>
    <!--#wizard-->
    </form>
    <!-- END OF DEFAULT WIZARD -->
   
</div>
<!--widgetcontent-->

 <div id="fileupload">
        <div class="">
            <table class="files">
            </table>
            <div class="fileupload-progressbar">
            </div>
        </div>
        <form action="/FileUpload.ashx" method="POST" enctype="multipart/form-data">
        <div class="formwrapper">
            <label class="fileinput-button">
                <span>Add files...</span>
                <input id="file" type="file" name="files[]" multiple>
            </label>
        </div>
        </form>
    </div>
<script src="/js/application.js" type="text/javascript"></script>
<script type="text/javascript">

    jQuery(document).ready(function () {
        // Smart Wizard
        jQuery('#wizard').smartWizard({ onFinish: onFinishCallback });

        function onFinishCallback() {
            alert('Finish Clicked');
        }
        //jQuery(".inline").colorbox({ inline: true, width: '60%', height: '500px' });
        jQuery('select, input:checkbox').uniform();
    });
</script>
<script id="template-upload" type="text/x-jquery-tmpl">
    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
        <td class="preview"></td>
        <td class="name">${name}</td>
        <td class="size">${sizef}</td>
        {{if error}}
            <td class="error" colspan="2">Error:
                {{if error === 'maxFileSize'}}File is too big
                {{else error === 'minFileSize'}}File is too small
                {{else error === 'acceptFileTypes'}}Filetype not allowed
                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
                {{else}}${error}
                {{/if}}
            </td>
        {{else}}
            <td class="progress"><div></div></td>
            <td class="start"><button>Start</button></td>
        {{/if}}
        <td class="cancel"><button>Cancel</button></td>
    </tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
    <tr class="template-download{{if error}} ui-state-error{{/if}}">
        {{if error}}
            <td></td>
            <td class="name">${namefdsa}</td>
            <td class="size">${sizef}</td>
            <td class="error" colspan="2">Error:
                {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
                {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
                {{else error === 3}}File was only partially uploaded
                {{else error === 4}}No File was uploaded
                {{else error === 5}}Missing a temporary folder
                {{else error === 6}}Failed to write file to disk
                {{else error === 7}}File upload stopped by extension
                {{else error === 'maxFileSize'}}File is too big
                {{else error === 'minFileSize'}}File is too small
                {{else error === 'acceptFileTypes'}}Filetype not allowed
                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
                {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
                {{else error === 'emptyResult'}}Empty file upload result
                {{else}}${error}
                {{/if}}
            </td>
        {{else}}
            <td class="preview">
                {{if Thumbnail_url}}
                    <a href="${url}" target="_blank"><img src="${Thumbnail_url}"></a>
                {{/if}}
            </td>
            <td class="name">
                <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${Name}</a>
            </td>
            <td class="size">${Length}</td>
            <td colspan="2"></td>
        {{/if}}
        <td class="delete">
            <button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
        </td>
    </tr>
</script>
